import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import 'font-awesome/css/font-awesome.min.css';
import axios from 'axios';//导入 axios 模块，用于进行 HTTP 请求
import qs from 'qs';//导入 qs 模块，用于处理请求参数的序列化和反序列化
import AMapLoader from '@amap/amap-jsapi-loader';
import {
  getCurDate,
  setSessionStorage,
  getSessionStorage,
  removeSessionStorage,
  setLocalStorage,
  getLocalStorage,
  removeLocalStorage,
  formatToFixed,
  formatMoney
} from './common.js';

const app = createApp(App);

 app.config.globalProperties.$amapLoader = AMapLoader;

 //会导致重复挂载
// AMapLoader.load({
//   key: '771416183bdd6f18d141c0d35d65014d',
//   version: '1.4.15', // AMap 版本号
//   plugins: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
// }).then(() => {
//   app.mount('#app');
// });


app.config.productionTip = false;//阻止在生产环境下显示生产提示

// 设置axios的基础url部分
// 简化代码，比如例如，如果在应用程序的某个地方发送了一个请求，如 axios.get('/api/data')
//实际发送的请求 URL 将会是 'http://localhost:8080/elm/api/data'
axios.defaults.baseURL = 'http://localhost:14000/';
//设置响应拦截器
axios.interceptors.response.use(function(response){
  if(response.data.code==403){
    location.href = '/error403';
  }
  if(response.data.code === 504){
    location.href = '/error504';
  }
  return response;
 },function(error){
  console.log(error);
  return Promise.reject(error);
 });
//axios.defaults.baseURL = 'http://127.0.0.1:4523/m1/3208808-0-default';

// 将axios挂载到vue实例上，使用时可以通过 this.$axios 这样使用
app.config.globalProperties.$axios = axios;
app.config.globalProperties.$qs = qs;
app.config.globalProperties.$getCurDate = getCurDate;
app.config.globalProperties.$setSessionStorage = setSessionStorage;
app.config.globalProperties.$getSessionStorage = getSessionStorage;
app.config.globalProperties.$removeSessionStorage = removeSessionStorage;
app.config.globalProperties.$setLocalStorage = setLocalStorage;
app.config.globalProperties.$getLocalStorage = getLocalStorage;
app.config.globalProperties.$removeLocalStorage = removeLocalStorage;
app.config.globalProperties.$formatToFixed = formatToFixed;
app.config.globalProperties.$formatMoney = formatMoney;

//router.beforeEach 是一个路由守卫函数，用于在导航发生之前执行一些逻辑操作
//to: 表示即将要进入的目标路由对象，包含目标路由的信息，如路径、参数、查询等。
//from: 表示当前导航正要离开的路由对象，包含当前路由的信息。
//next: 是一个函数，用于进入下一个钩子。必须在 beforeEach 中调用 next 函数，否则导航将无法继续进行。
router.beforeEach((to, from, next) => {
  const user = sessionStorage.getItem('user');
  // 除了登录、注册、首页、商家列表、商家信息之外，都需要判断是否登录
  if (
    !(
      to.path === '/' ||
      to.path === '/index' ||
      to.path === '/businessList' ||
      to.path === '/businessInfo' ||
      to.path === '/login' ||
      to.path === '/register'||
      to.path === '/findPage'||
      to.path === '/testLocation' ||
      to.path === '/locationSearch'||
      to.path === '/error403' ||
      to.path === '/error504' ||
      to.path === '/check'
      )
    ) {
        if (user === null) {
          //location.reload();在每次路由导航时强制刷新页面可能导致重定向循环
          //router.push('/login');
          //location.reload();
          next('/login');//直接重定向到登录页面
        }
    }
  next();//next() 用于控制导航的进行，不调用，导航将中止
});

app.use(router);//注册 Vue Router 插件
app.use(store);//注册 Vuex（状态管理库）插件（如果需要）
app.mount('#app');//将 Vue 应用程序实例挂载到指定的 HTML 元素上
/* Vue 应用程序实例（app）挂载到指定的 HTML 元素上。其中，'#app' 是选择器，表示要挂载的目标元素的 ID。
在 HTML 页面中，需要有一个具有相应 ID 的元素，例如 <div id="app"></div>。
通过将应用程序实例挂载到指定的 HTML 元素上，Vue 将会在该元素内部渲染应用程序的模板和组件，
并将数据和行为绑定到该元素及其子元素上。这样，应用程序就能够呈现在页面上，并响应用户的操作和数据变化。
*/